"use client"

import { useState } from "react"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export function ClassSelector() {
  const [selectedClass, setSelectedClass] = useState("3-2")

  return (
    <div className="flex items-center gap-4">
      <Select value={selectedClass} onValueChange={setSelectedClass}>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="选择班级" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>计算机科学</SelectLabel>
            <SelectItem value="cs-1">计算机科学1班</SelectItem>
            <SelectItem value="cs-2">计算机科学2班</SelectItem>
          </SelectGroup>
          <SelectGroup>
            <SelectLabel>软件工程</SelectLabel>
            <SelectItem value="se-1">软件工程1班</SelectItem>
            <SelectItem value="se-2">软件工程2班</SelectItem>
          </SelectGroup>
          <SelectGroup>
            <SelectLabel>电子工程</SelectLabel>
            <SelectItem value="ee-1">电子工程1班</SelectItem>
            <SelectItem value="ee-2">电子工程2班</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
      <Select defaultValue="math">
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="选择课程" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="math">高等数学</SelectItem>
          <SelectItem value="english">大学英语</SelectItem>
          <SelectItem value="programming">程序设计</SelectItem>
          <SelectItem value="datastructure">数据结构</SelectItem>
          <SelectItem value="network">计算机网络</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}
